<template>
	<view class="item-box">
		<view class="item">
			<view class="l">
				<view class="title">{{data.cname}}</view>
				<view class="adress">{{data.shengfen}}{{data.city}}{{data.xian}}{{data.addr}}</view>

			</view>
			<view class="r" v-if="data.distance">
				<text>{{data.distance}}米</text>
				<view style="margin-top: 3rpx;">
					<image style="width: 25px; height: 25px;" src="/static/gridManagement/position.png"></image>
				</view>
			</view>
		</view>

		<view class="bnts">
			<text class="checkIn" @click="intoCheckIn">{{checkInId?'签出':'签到'}}</text>
			<text class="other" @click="detail">...</text>


		</view>
	</view>
</template>

<script>
	import {
		getLatitudeLongitudeByAddress
	} from '@/common/api/map.js'
	export default {
		props: {
			checkInId: Number,
			data: {
				type: Object,
				default: {
					id: null,
					cname: '保定优尚羊绒制品有限公司',
					shengfen: '河北省',
					city: '衡水市',
					xian: '故城县',
					addr: '梁庄村',
					distance: 32,
					completeAddress: '',
					longitude: null,
					latitude: null

				}
			},
		},
		computed: {
			getCompleteAddress: function() {
				return this.data.shengfen + this.data.city + this.data.xian + this.data.addr
			}

		},
		data() {
			return {

			}
		},
		methods: {
			// getCompleteAddress() {

			// 	return this.data.shengfen + this.data.city + this.data.xian + this.data.addr
			// },
			updateCheckInId(checkInId) {

				this.$emit('update:checkInId', checkInId);
			},
			async intoCheckIn() {

				if (this.getCompleteAddress && this.data.longitude && this.data.latitude) {
					console.log("11111111...................")
					uni.navigateTo({
						url: '/pages/gridManagement/common/checkIn?id=' + this.data.id + "&longitude=" +
							this.data.longitude + "&latitude=" + this.data.latitude + "&checkInId=" +
							this.checkInId + "&address=" + this.getCompleteAddress + "&cname=" + this.data
							.cname
					});
				} else if (!this.getCompleteAddress) {
					console.log("2222222222222...................")
					uni.showToast({
						title: '请先完善客户地址信息!',
						icon: 'none',
						duration: 2000
					});
				} else {

					let res = await getLatitudeLongitudeByAddress({
						address: this.getCompleteAddress
					})

					let lonLan1 = res.data;


					console.log(lonLan1)
					if (Array.isArray(lonLan1)) {
						uni.navigateTo({
							url: '/pages/gridManagement/common/checkIn?id=' + this.data.id + "&longitude=" +
								lonLan1[0] + "&latitude=" + lonLan1[1] + "&checkInId=" +
								this.checkInId + "&address=" + this.getCompleteAddress + "&cname=" + this.data
								.cname
						});
					} else {
						uni.showToast({
							title: '无法定位到该位置!',
							icon: 'none',
							duration: 2000
						});
					}

				}

			},
			detail() {

				uni.navigateTo({
					url: `/pages/management/manageDetail?data=${this.data.id}&type=0`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-box {
		margin-top: 20rpx;
		// border: 1px solid #ccc;
		overflow: hidden;
		padding: 25rpx 45rpx;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
		box-shadow: 3px 3px 13px 0 rgba(0, 0, 0, 0.12), -3px -3px 13px 0 rgba(0, 0, 0, 0.12);
		box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.12), -3px 3px 8px 0 rgba(0, 0, 0, 0.12);

		.item {
			overflow: hidden;


			.l {
				float: left;
				width: 80%;

				.title {
					font-size: 30rpx;
					font-weight: 600;
				}

				.adress {
					color: #888888;
					font-size: 25rpx;
					margin: 10rpx 0;
				}
			}

			.r {
				float: right;
				position: relative;
				with: 20%;
				color: #888888;
				font-size: 25rpx;
			}
		}

		.bnts {
			text-align: center;
			font-size: 18rpx;
			margin-top: 20rpx;

			text {
				padding: 8rpx 24rpx;
				margin: 10rpx 30rpx;
			}

			.checkIn {
				background-color: #92C1F7;
				color: #3D8DE7;
				border-radius: 16rpx;
			}

			.other {
				background-color: #FAE49D;
				color: #FFC300;
				border-radius: 16rpx;
			}
		}


	}
</style>